<template>
  <div class="legal-service-container" ref="legalServiceCon">
    <div class="legal-service-hd-con">
      <div class="legal-service-hd-bg"></div>
    </div>
    <div class="legal-service-list">
      <div
        class="legal-service-list-item"
        v-for="(legalServe, key, index) in legalServeData"
        :key="index"
      >
        <h3>
          <img src="../../assets/images/hammer.png" alt="" />
          {{ key }}
        </h3>
        <ul>
          <li
            v-for="items in legalServe"
            :key="items.id"
            :class="{ 'ls-active': currentMatters === items.matters }"
            @click="handleDisplayDetails($event, items.matters)"
          >
            {{ items.matters }}
          </li>
        </ul>
        <template v-for="(n, i) in legalServe">
          <div
            class="legal-service-info"
            v-show="currentMatters === n.matters"
            :key="i"
          >
            <p>
              <span>事项名称：</span>
              <span class="matters-name">
                <span class="ls-name">{{ n.matters }}</span>
                <span class="ls-link">
                  <template v-if="key == '日常法律咨询'">
                    <span @click="handleEnterMatter()"
                      ><img
                        src="../../assets/images/legal_service_link.png"
                        alt=""
                      />点击进入</span
                    >
                  </template>
                </span>
              </span>
            </p>
            <p>
              <span>工作承诺：</span>
              <span v-html="n.promise"></span>
            </p>
            <p>
              <span>服务流程：</span>
              <span v-html="n.matterProcess"></span>
            </p>
            <p>
              <span>服务对象：</span>
              <span v-html="n.object"></span>
            </p>
            <p>
              <span>时限要求：</span>
              <span v-html="n.timeLimit"></span>
            </p>
            <p>
              <span>责&nbsp;&nbsp;任&nbsp;&nbsp;人：</span>
              <span v-html="n.responsible"></span>
            </p>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import { getLegalServe } from "@/api";
import { manualConsultationUrl } from "@/utils";
export default {
  name: "LegalService",
  data() {
    return {
      legalServeData: {}, //法律服务信息
      currentMatters: "", //点击的法律服务
    };
  },
  created() {
    this.getLegalServeData();
  },
  methods: {
    /**
     * 获取法律服务数据
     */
    async getLegalServeData() {
      this.legalServeData = await getLegalServe();
    },

    /**
     * 获取法律服务详情信息
     * @param {*} $event 当前事件对象
     * @param {*} matters 法律服务名称
     */
    handleDisplayDetails($event, matters) {
      this.currentMatters = this.currentMatters !== matters ? matters : "";

      //设置当前元素滚动到列表容器可视区顶部
      setTimeout(() => {
        this.$refs.legalServiceCon.scrollTop = $event.target.offsetTop - 20;
      }, 300);
    },

    /**
     * 点击进入事项
     */
    handleEnterMatter() {
      MXCommon.openUrlPage(manualConsultationUrl());
    },
  },
};
</script>

<style lang="less" scoped>
@import url("~@/assets/styles/legalService/index.less");
</style>